<%--
  Created by IntelliJ IDEA.
  User: 15443
  Date: 2021/6/16
  Time: 0:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>第二天天气</title>
    <script src="../js/echarts.min.js"></script>
    <script src="../js/jquery.js"></script>
    <script>
        var housrs=[];
        var tempers=[];

        var datees=[];
        var times=[];
        var tempers1=[];
        var humiditys=[];
        var illuminances=[];
        var soils=[];
    </script>
    <style>
        #main{
            text-align: center;
            margin: 0 auto;
        }
        #main1{
            text-align: center;
            margin: 0 auto;
        }
        #title{
            text-align: center;
            margin: 0 auto;
            font-size: 30px;
            color: #FF00FF;
        }
    </style>
</head>
<body>
<div id="title"><span>土壤湿度分析</span></div>
<%-- <div id="main" style="width: 100%;height:500px;"></div>--%>
<div id="main1" style="width:100%;height:500px;"></div>

<script>
    $.ajax({
        url: "/pxthadoop/alldata",
        dataType: "json",
        type: "post",
        async: false,
        success: function (data1) {
            /*  var data = JSON.stringify(data1);
              alert(data);*/
            /*  humidity;//湿度
              illuminance;//光照度
               soil;//土壤*/
            $.each(data1.data,function (i,v) {
                /*alert(v.date+":"+v.time+":"+v.temper+":"+v.humidity+":"+v.illuminance+":"+v.soil);*/
                datees[i]=v.date;
                times[i]=v.time;
                tempers1[i]=v.temper;
                humiditys[i]=v.humidity;
                illuminances[i]=v.illuminance;
                soils[i]=v.soil;
            })
        }
    })


    var myChart2 = echarts.init(document.getElementById('main1'));
    var option2 = {
        color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
        title: {
            text: '渐变堆叠面积图'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['温度°C', '湿度RH%', '光照度lx', '土壤湿度RH%']
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',

                boundaryGap: false,
                data: times
            }
        ],
        yAxis: [
            {
                type: 'value',
                max:200,
                splitNumber:10
            }
        ],
        series: [

            {
                name: '土壤湿度RH%',
                type: 'line',
                stack: '总量',
                smooth: true,
                lineStyle: {
                    width: 0
                },
                showSymbol: false,
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(255, 0, 135)'
                    }, {
                        offset: 1,
                        color: 'rgba(135, 0, 157)'
                    }])
                },
                emphasis: {
                    focus: 'series'
                },
                data: soils
            },

        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart2.setOption(option2);
</script>

</body>
</html>
